<template>
  <div id="admin-manage" class="page-wrapper">
    <div class="selector-wrapper main-card wrapper">
      <div class="main-card">
        <el-form class="form" :inline="true" ref="form" :model="formData">
          <el-form-item label="订单编号" prop="orderId">
            <el-input
              v-model.trim="formData.orderId"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model.trim="formData.userName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="userPhone">
            <el-input
              v-model.trim="formData.userPhone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="购买时间">
            <el-date-picker
              v-model="formData.time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="primary" @click="handleSubmitClick">获取数据</el-button>
    </div>
    <div class="wrapper main-card">
      <el-table :data="pageData" style="width: 100%" :stripe="true">
        <el-table-column prop="orderId" label="订单号"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="userPhone" label="电话号"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsNumber" label="购买数量"></el-table-column>
        <el-table-column prop="totalMoney" label="应付金额"></el-table-column>
        <el-table-column prop="userAddress" label="收货地址"></el-table-column>
        <el-table-column label="付款状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.paystate === 0
                ? '未付款'
                : scope.row.paystate === 1
                ? '已付款'
                : scope.row.paystate === 2
                ? '待退款'
                : scope.row.paystate === 3
                ? '已退款'
                : '未知状态'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.state === '0'
                ? '待付款'
                : scope.row.state === '1'
                ? '待发货'
                : scope.row.state === '2'
                ? '待收货'
                : scope.row.state === '3'
                ? '已完成'
                : '未知状态'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="trackingNumber"
          label="快递单号"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="
                handleQueryExpress(
                  scope.row.userPhone,
                  scope.row.trackingNumber
                )
              "
              >查询快递</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="快递信息" :visible.sync="dialogVisible" width="30%">
        <div v-if="expressInfo">
          <p>快递单号：{{ expressInfo.express_no }}</p>
          <p>快递公司：{{ expressInfo.company_name }}</p>
          <div v-for="(item, index) in expressInfo.list" :key="index">
            <p>状态信息：{{ item.msg }}</p>
            <p>时间：{{ item.time }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmReceipt">签 收</el-button>
        </span>
      </el-dialog>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchwaitsendorderlist,
  getexpress,
  getexpresssign
} from '@/api/pcclinet'

export default {
  name: 'RoomInfo',
  data() {
    return {
      currentPage: 1,
      pageData: [],
      total: '',
      pageSize: 10,
      dialogVisible: false,
      formData: {
        orderId: '',
        userName: '',
        userPhone: '',
        time: []
      },
      modifydata: {},
      tableData: [],
      currentRow: null,
      expressInfo: null,
      currentTrackingNumber: ''
    }
  },
  methods: {
    confirmReceipt() {
      // 调用 getexpresssign 接口
      getexpresssign({ trackingNumber: this.currentTrackingNumber })
        .then(response => {
          if (response.success) {
            console.log('trackingNumber', this.trackingNumber)
            this.$message.success('签收成功')
            searchwaitsendorderlist().then(res => {
              if (res.success) {
                this.tableData = res.data
                this.total = res.data.length
                this.pageData = this.queryByPage()
              }
            })
          } else {
            this.$message.error('签收失败: ' + response.message)
          }
        })
        .catch(error => {
          console.error('请求错误:', error)
          this.$message.error('请求错误')
        })
        .finally(() => {
          this.dialogVisible = false
        })
    },

    handleQueryExpress(userPhone, trackingNumber) {
      console.log('查询快递信息', userPhone, trackingNumber)
      getexpress({ userPhone, trackingNumber })
        .then(response => {
          if (response.success) {
            this.expressInfo = response.data
            console.log('快递信息:', this.expressInfo)
          } else {
            console.error('获取快递信息失败:', response.message)
            this.$message.error('获取快递信息失败')
            this.expressInfo = null
          }
        })
        .catch(error => {
          console.error('请求错误:', error)
          this.$message.error('请求错误')
          this.expressInfo = null
        })
        .finally(() => {
          this.dialogVisible = true
          this.currentTrackingNumber = trackingNumber
        })
    },
    queryByPage() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = this.currentPage * this.pageSize
      return this.tableData.slice(start, end)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.pageData = this.queryByPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageData = this.queryByPage()
    },
    handleSubmitClick() {
      const { orderId, userName, userPhone, time } = this.formData
      const strTime = time.length ? time[0] : ''
      const endTime = time.length ? time[1] : ''

      searchwaitsendorderlist({
        orderId,
        userName,
        userPhone,
        strTime,
        endTime
      })
        .then(res => {
          if (res.success) {
            this.tableData = res.data
            this.total = res.data.length
            this.pageData = this.queryByPage()
          }
        })
        .catch(err => {
          console.error('Error fetching data:', err)
        })
    }
  },
  mounted() {
    searchwaitsendorderlist().then(res => {
      if (res.success) {
        this.tableData = res.data
        this.total = res.data.length
        this.pageData = this.queryByPage()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 40px 0;
}

.selector-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}

.list-wrapper {
  margin-top: 40px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

.form-item-wrapper {
  display: flex;
  justify-content: space-between;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* Adjust margin as needed */
}

.image-preview {
  max-width: 100px; /* 根据需要调整 */
  max-height: 50px; /* 根据需要调整 */
}
</style>
